<template>
  <div class="px-30px box-border w-1/1 h-1/1 py-10px flex flex-row justify-center">
    <ul class="h-1/1 bg-[rgba(0,0,0,0.03)]">
      <li
        v-for="p in materialList"
        :key="p.id"
        class="leading-[36px] cursor-pointer block float-left pr-[16px] pl-[8px] relative material-item"
        @click="open(p)"
      >
        <span class="text-[14px]">{{ p.name }}</span>
      </li>
    </ul>
    <ul class="ml-20px h-1/1 bg-[rgba(0,0,0,0.03)]">
      <li
        class="leading-[36px] cursor-pointer block float-left pr-[16px] pl-[8px] relative material-item"
        @click="openLou"
        v-if="props.isShowLou"
      >
        <span class="text-[14px]">楼盘</span>
      </li>
    </ul>
    <SuCaiPopup ref="suRef" :fileType="initParams.fileType" :maxSelect="initParams.maxSelect" @confirm="getUrl"></SuCaiPopup>
    <loupanDialog ref="louRef" v-bind="$attrs" @card="getCard" :isShowLou="props.isShowLou"></loupanDialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import SuCaiPopup from "@/components/UploadCool/index.vue";
import loupanDialog from "./loupan.vue";

interface Props {
  isShowLou?: boolean;
}

const props = withDefaults(defineProps<Props>(), { isShowLou: true });

interface List {
  id: number;
  name: "图片" | "视频";
  fileType: "image" | "video";
  maxSelect: number;
}
const materialList = ref<List[]>([
  { id: 0, name: "图片", fileType: "image", maxSelect: 10 },
  { id: 1, name: "视频", fileType: "video", maxSelect: 10 }
]);

// 选择素材
const suRef = ref<InstanceType<typeof SuCaiPopup> | null>();
// 设置当前配置
const initParams = reactive({ fileType: "image", maxSelect: 1 });
const open = (p: List) => {
  initParams.fileType = p.fileType;
  initParams.maxSelect = p.maxSelect;
  suRef.value?.change();
};

// 选择楼盘
const louRef = ref<InstanceType<typeof loupanDialog> | null>();
// 打开楼盘
const openLou = () => {
  louRef.value?.acceptParams();
};

// 选择素材输出到父组件
const emits = defineEmits(["getUrl"]);
const getUrl = (val: any) => {
  emits("getUrl", { fileType: initParams.fileType, data: val });
};
// 选择楼盘卡片输出到父组件
const getCard = (val: any) => {
  emits("getUrl", { fileType: "card", data: val });
};
</script>

<style lang="scss" scoped>
.material-item {
  &:hover {
    background-color: rgba($color: #000000, $alpha: 4%);
  }
  ::before {
    position: absolute;
    right: 8px;
    bottom: 16px;
    width: 4px;
    height: 3px;
    content: "";
    background: transparent
      url("data:image/svg+xml;charset=UTF-8,%3csvg width='4' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.278 2.583c-.153.23-.397.238-.556 0L.278.417C.125.187.215 0 .49 0h3.02c.27 0 .37.179.212.417L2.278 2.583z' fill='%234A4A51' fill-rule='evenodd'/%3e%3c/svg%3e")
      0 0 no-repeat;
  }
}
</style>
